<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>掘金</title>
    <link rel="stylesheet" href="./css/wmr/index_head.css">
    <link rel="stylesheet" href="./css/wmr/iconfont.css">
    <link rel="stylesheet" href="./css/wmr/reset.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="header">
        <div class="common clearfix">
            <!-- 导航选项 -->
            <div class="navbar">
                <!-- logo图片 -->
                <a href="" class="logo">
                    <img src="./img/wmr/logo.png" alt="" class="logo-img">
                </a>
                <ul class="nav-ul clearfix">
                    <li><a href="javascript:;">首页</a></li>
                    <li><a href="javascript:;">沸点</a></li>
                    <li><a href="javascript:;">话题</a></li>
                    <li><a href="javascript:;">小册</a></li>
                    <li><a href="javascript:;">活动</a></li>
                    <li><a href="javascript:;" class="nth">有奖征文🎁</a></li>
                </ul>
            </div>
            <div class="header-right">
                <!-- 搜索 -->
                <div class="search">
                    <form class="search-form">
                        <input type="text" placeholder="搜索更新了" class="search-input">
                        <img src="./img/wmr/sousuo.png" alt="">
                    </form>
                </div>
                <!-- 写文章 -->
                <!-- 登陆注册 -->
                <div class="tive">
                    <div class="bord">
                        <i class="iconfont icon-caogao"></i>
                        <a href="javascript:;">写文章</a>
                    </div>
                    <div class="bord-right">
                        <a href="/login" onclick="boxShow(true,true)">登录</a>
                        <a href="/zhuce" onclick="boxShow(true,false)">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- table小导航 -->
    <div class="neck">
        <div class="common clearfix">
            <div class="neck-nav">
                <ul class="neck-ul clearfix">
                    <li><a href="javascript:;" class="active">推荐</a></li>
                    <li><a href="javascript:;">后端</a></li>
                    <li><a href="javascript:;">前端</a></li>
                    <li><a href="javascript:;">Android</a></li>
                    <li><a href="javascript:;">iOS</a></li>
                    <li><a href="javascript:;">人工智能</a></li>
                    <li><a href="javascript:;">开发工具</a></li>
                    <li><a href="javascript:;">代码人生</a></li>
                    <li><a href="javascript:;">阅读</a></li>
                </ul>
                <span><a href="javascript:;">标签管理</a></span>
            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="center">
        <div class="common clearfix">
            <!-- 左 -->

            <div class="center-left session">
                <div class="center-left-header clearfix">
                    <ul class="list-left">
                        <li><a href="javascript:;">热门</a></li>
                        <li><a href="javascript:;">最新</a></li>
                        <li><a href="javascript:;">评论</a></li>
                    </ul>
                    <ul class="list-right">
                        <li><a href="javascript:;">本周最热&nbsp;&nbsp;·</a></li>
                        <li><a href="javascript:;">本月最热&nbsp;&nbsp;·</a></li>
                        <li><a href="javascript:;">历史最热</a></li>
                    </ul>
                </div>
                <!-- 左边内容 -->
                <div class="center-body">
                    <div class="scott">
                        <div class="scott-tab">
                            <div class="scott-head">
                                <ul class="clearfix">
                                    <li><a href="javascript:;">专栏·</a></li>
                                    <li><a href="javascript:;">Scott·</a></li>
                                    <li><a href="javascript:;">一小时前·</a></li>
                                    <li><a href="javascript:;">前端</a></li>
                                </ul>
                            </div>
                            <a href="javascript:;">小菜前端是如何炼成的-Scott亲笔信</a>
                            <div class="scott-end">
                                <span>
                                    <img src="./img/wmr/dianzan.png" alt="">
                                    <i>100</i>
                                </span>
                                <span>
                                    <img src="./img/wmr/huixin.png" alt="">
                                    <i>100</i>
                                </span>
                                <span class="scott-span" style="display:none">
                                    <img src="./img/wmr/shangchuan.png" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="scott">
                        <div class="scott-tab">
                            <div class="scott-head">
                                <ul class="clearfix">
                                    <li><a href="javascript:;">专栏·</a></li>
                                    <li><a href="javascript:;">Scott·</a></li>
                                    <li><a href="javascript:;">一小时前·</a></li>
                                    <li><a href="javascript:;">前端</a></li>
                                </ul>
                            </div>
                            <a href="javascript:;">漫话:如何给女朋友解释什么是策略模式？</a>
                            <div class="scott-end">
                                <span>
                                    <img src="./img/wmr/dianzan.png" alt="">
                                    <i>100</i>
                                </span>
                                <span>
                                    <img src="./img/wmr/huixin.png" alt="">
                                    <i>100</i>
                                </span>
                                <span class="scott-span" style="display:none">
                                    <img src="./img/wmr/shangchuan.png" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="scott">
                        <div class="scott-tab">
                            <div class="scott-head">
                                <ul class="clearfix">
                                    <li><a href="javascript:;">专栏·</a></li>
                                    <li><a href="javascript:;">Scott·</a></li>
                                    <li><a href="javascript:;">一小时前·</a></li>
                                    <li><a href="javascript:;">前端</a></li>
                                </ul>
                            </div>
                            <a href="javascript:;">你真的了解Cookie和Session吗</a>
                            <div class="scott-end">
                                <span>
                                    <img src="./img/wmr/dianzan.png" alt="">
                                    <i>100</i>
                                </span>
                                <span>
                                    <img src="./img/wmr/huixin.png" alt="">
                                    <i>100</i>
                                </span>
                                <span class="scott-span" style="display:none">
                                    <img src="./img/wmr/shangchuan.png" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="scott">
                        <div class="scott-tab">
                            <div class="scott-head">
                                <ul class="clearfix">
                                    <li><a href="javascript:;">专栏·</a></li>
                                    <li><a href="javascript:;">whinc·</a></li>
                                    <li><a href="javascript:;">4小时前·</a></li>
                                    <li><a href="javascript:;">前端</a></li>
                                </ul>
                            </div>
                            <a href="javascript:;">前端路由原理解析和实现</a>
                            <div class="scott-end">
                                <span>
                                    <img src="./img/wmr/dianzan.png" alt="">
                                    <i>100</i>
                                </span>
                                <span>
                                    <img src="./img/wmr/huixin.png" alt="">
                                    <i>100</i>
                                </span>
                                <span class="scott-span" style="display:none">
                                    <img src="./img/wmr/shangchuan.png" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="scott">
                        <div class="scott-tab">
                            <div class="scott-head">
                                <ul class="clearfix">
                                    <li><a href="javascript:;">专栏·</a></li>
                                    <li><a href="javascript:;">汪图男·</a></li>
                                    <li><a href="javascript:;">15小时前·</a></li>
                                    <li><a href="javascript:;">Vue.js</a></li>
                                </ul>
                            </div>
                            <a href="javascript:;">前端路由原理解析和实现</a>
                            <div class="scott-end">
                                <span>
                                    <img src="./img/wmr/dianzan.png" alt="">
                                    <i>100</i>
                                </span>
                                <span>
                                    <img src="./img/wmr/huixin.png" alt="">
                                    <i>100</i>
                                </span>
                                <span class="scott-span" style="display:none">
                                    <img src="./img/wmr/shangchuan.png" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="scott">
                        <div class="scott-tab">
                            <div class="scott-head">
                                <ul class="clearfix">
                                    <li><a href="javascript:;">专栏·</a></li>
                                    <li><a href="javascript:;">whinc·</a></li>
                                    <li><a href="javascript:;">4小时前·</a></li>
                                    <li><a href="javascript:;">前端</a></li>
                                </ul>
                            </div>
                            <a href="javascript:;">前端路由原理解析和实现</a>
                            <div class="scott-end">
                                <span>
                                    <img src="./img/wmr/dianzan.png" alt="">
                                    <i>100</i>
                                </span>
                                <span>
                                    <img src="./img/wmr/huixin.png" alt="">
                                    <i>100</i>
                                </span>
                                <span class="scott-span" style="display:none">
                                    <img src="./img/wmr/shangchuan.png" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="scott">
                        <div class="scott-tab">
                            <div class="scott-head">
                                <ul class="clearfix">
                                    <li><a href="javascript:;">专栏·</a></li>
                                    <li><a href="javascript:;">汪图男·</a></li>
                                    <li><a href="javascript:;">15小时前·</a></li>
                                    <li><a href="javascript:;">Vue.js</a></li>
                                </ul>
                            </div>
                            <a href="javascript:;">前端路由原理解析和实现</a>
                            <div class="scott-end">
                                <span>
                                    <img src="./img/wmr/dianzan.png" alt="">
                                    <i>100</i>
                                </span>
                                <span>
                                    <img src="./img/wmr/huixin.png" alt="">
                                    <i>100</i>
                                </span>
                                <span class="scott-span" style="display:none">
                                    <img src="./img/wmr/shangchuan.png" alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-left session" style="display:none">
                <div class="center-body">
                    <div class="scott-cook">
                        <div class="cook">
                            <div class="cook-head"></div>
                            <div class="cook-name">王明仁</div>
                            <div class="cook-self">学生 · 11小时前</div>
                        </div>
                        <div class="cook-ted">
                            <div class="cook-ted-left">专栏</div>
                            <div class="cook-ted-right">不爱吃葡萄干</div>
                        </div>
                        <div class="cook-end">
                            <div>
                                <i class="iconfont icon-zan"></i>
                                <span>1</span>
                            </div>
                            <div class="cook-div">
                                <i class="iconfont icon-xinxi cook-i"></i>
                                <span>1</span>
                            </div>
                            <div>
                                <i class="iconfont icon-fenxiangtubiao"></i>
                            </div>
                        </div>
                        <div class="cook-last" style="display:none">
                            <div class="cook-center">
                                <div class="cook-last-left">
                                </div>
                                <textarea class="tet" placeholder="输入评论"></textarea>
                                <div class="cook-lgo">
                                    <i class="iconfont icon-biaoqing"></i>
                                    <a href="javascript:;">表情</a>
                                    <button>发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="scott-cook">
                        <div class="cook">
                            <div class="cook-head"></div>
                            <div class="cook-name">王明仁</div>
                            <div class="cook-self">学生 · 11小时前</div>
                        </div>
                        <div class="cook-ted">
                            <div class="cook-ted-left">专栏</div>
                            <div class="cook-ted-right">不爱吃葡萄干</div>
                        </div>
                        <div class="cook-end">
                            <div>
                                <i class="iconfont icon-zan"></i>
                                <span>1</span>
                            </div>
                            <div>
                                <i class="iconfont icon-xinxi"></i>
                                <span>1</span>
                            </div>
                            <div>
                                <i class="iconfont icon-fenxiangtubiao"></i>
                            </div>

                        </div>
                        <div class="cook-last" style="display:none">
                            <div class="cook-center">
                                <div class="cook-last-left">
                                </div>
                                <textarea class="tet" placeholder="输入评论"></textarea>
                                <div class="cook-lgo">
                                    <i class="iconfont icon-biaoqing"></i>
                                    <a href="javascript:;">表情</a>
                                    <button>发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="scott-cook">
                        <div class="cook">
                            <div class="cook-head"></div>
                            <div class="cook-name">王明仁</div>
                            <div class="cook-self">学生 · 11小时前</div>
                        </div>
                        <div class="cook-ted">
                            <div class="cook-ted-left">专栏</div>
                            <div class="cook-ted-right">不爱吃葡萄干</div>
                        </div>
                        <div class="cook-end">
                            <div>
                                <i class="iconfont icon-zan"></i>
                                <span>1</span>
                            </div>
                            <div>
                                <i class="iconfont icon-xinxi cook-i"></i>
                                <span>1</span>
                            </div>
                            <div>
                                <i class="iconfont icon-fenxiangtubiao"></i>
                            </div>

                        </div>
                        <div class="cook-last" style="display:none">
                            <div class="cook-center">
                                <div class="cook-last-left">
                                </div>
                                <textarea class="tet" placeholder="输入评论"></textarea>
                                <div class="cook-lgo">
                                    <i class="iconfont icon-biaoqing"></i>
                                    <a href="javascript:;">表情</a>
                                    <button>发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="scott-cook">
                        <div class="cook">
                            <div class="cook-head"></div>
                            <div class="cook-name">王明仁</div>
                            <div class="cook-self">学生 · 11小时前</div>
                        </div>
                        <div class="cook-ted">
                            <div class="cook-ted-left">专栏</div>
                            <div class="cook-ted-right">不爱吃葡萄干</div>
                        </div>
                        <div class="cook-end">
                            <div>
                                <i class="iconfont icon-zan"></i>
                                <span>1</span>
                            </div>
                            <div>
                                <i class="iconfont icon-xinxi cook-i"></i>
                                <span>1</span>
                            </div>
                            <div>
                                <i class="iconfont icon-fenxiangtubiao"></i>
                            </div>

                        </div>
                        <div class="cook-last" style="display:none">
                            <div class="cook-center">
                                <div class="cook-last-left">
                                </div>
                                <textarea class="tet" placeholder="输入评论"></textarea>
                                <div class="cook-lgo">
                                    <i class="iconfont icon-biaoqing"></i>
                                    <a href="javascript:;">表情</a>
                                    <button>发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右 -->
            <div class="right-last">
                <div class="center-right">
                    <div class="center-title">
                        <h3>推荐作者</h3>
                    </div>
                    <div class="recommend">
                        <ul>
                            <li>
                                <a href="javascript:;" class="clearfix">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>欢迎</div>
                                    <div>在读学生</div>
                                    <div>JavaScript 领域贡献者</div>
                                </a>
                            </li>
                            <li><a href="javascript:;">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>欢迎</div>
                                    <div>在读学生</div>
                                    <div>JavaScript 领域贡献者</div>
                                </a></li>
                            <li><a href="javascript:;">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>草履虫的思考</div>
                                    <div>前端开发工程师</div>
                                    <div>JavaScript、MVVM</div>
                                </a></li>
                        </ul>
                        <div class="last-div"><a href="javascript:;">查看更多<i>></i></a></div>
                    </div>
                </div>
                <div class="center-right">
                    <div class="center-title">
                        <h3>推荐作者</h3>
                    </div>
                    <div class="recommend">
                        <ul>
                            <li>
                                <a href="javascript:;" class="clearfix">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>欢迎</div>
                                    <div>在读学生</div>
                                    <div>JavaScript 领域贡献者</div>
                                </a>
                            </li>
                            <li><a href="javascript:;">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>欢迎</div>
                                    <div>在读学生</div>
                                    <div>JavaScript 领域贡献者</div>
                                </a></li>
                            <li><a href="javascript:;">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>草履虫的思考</div>
                                    <div>前端开发工程师</div>
                                    <div>JavaScript、MVVM</div>
                                </a></li>
                        </ul>
                        <div class="last-div"><a href="javascript:;">查看更多<i>></i></a></div>
                    </div>
                </div>
                <div class="center-right">
                    <div class="center-title">
                        <h3>推荐作者</h3>
                    </div>
                    <div class="recommend">
                        <ul>
                            <li>
                                <a href="javascript:;" class="clearfix">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>欢迎</div>
                                    <div>在读学生</div>
                                    <div>JavaScript 领域贡献者</div>
                                </a>
                            </li>
                            <li><a href="javascript:;">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>欢迎</div>
                                    <div>在读学生</div>
                                    <div>JavaScript 领域贡献者</div>
                                </a></li>
                            <li><a href="javascript:;">
                                    <div class="frist-div"><img src="./img/wmr/right-one" alt=""></div>
                                    <div>草履虫的思考</div>
                                    <div>前端开发工程师</div>
                                    <div>JavaScript、MVVM</div>
                                </a></li>
                        </ul>
                        <div class="last-div"><a href="javascript:;">查看更多<i>></i></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="./js/wmr/iconfont.js"></script>
    <script src="./lib/jqurey/jquery.min.js"></script>
    <script src="./lib/template/template-web.js"></script>
    <!-- <script src="./js/wmr/index.js"></script>r -->
    <!-- 登陆注册框 公共复制 -->
    <div class="longin_box" style="
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.3);
  z-index: 500;
">
        <!-- css -->
        <style>
            .toggle_box>div {
                display: none;
            }

            .toggle_box>div.show {
                display: block;
            }
        </style>
        <link rel="stylesheet" href="./css/zbx/login.css">
        <!-- <link rel="stylesheet" href="./css/zbx/login.css"> -->
        <div class="toggle_box">
            <!-- 登陆 -->
            <div class="denlu show">

                <div data-v-3488bcba="" data-v-90732428="" class="auth-modal-box">
                    <form data-v-3488bcba="" class="auth-form">
                        <div data-v-3488bcba="" class="panfish">
                            <img data-v-3488bcba="" src="./img/zbx/normal.0447fe9.png" class="normal">
                            <img data-v-3488bcba="" src="./img/zbx/greeting.1415c1c.png" class="greeting"
                                style="display: none;">
                            <img data-v-3488bcba="" src="./img/zbx/blindfold.58ce423.png" class="blindfold"
                                style="display: none;">
                        </div>
                        <i data-v-3488bcba="" title="关闭" class="close-btn ion-close-round"
                            onclick=" boxShow(false,false)"></i>
                        <div data-v-3488bcba="" class="panel">
                            <h1 data-v-3488bcba="" class="title">登录</h1>
                            <!---->
                            <div data-v-3488bcba="" class="input-group">
                                <div data-v-3488bcba="" class="input-box">
                                    <input data-v-3488bcba="" name="zhu_phonum" maxlength="64" placeholder="请输入手机号或邮箱"
                                        class="input">
                                </div>
                                <div data-v-3488bcba="" class="input-box">
                                    <input data-v-3488bcba="" name="zhu_password" type="password" maxlength="64"
                                        placeholder="请输入密码" class="input">
                                </div>
                            </div>
                            <button data-v-3488bcba="" class="btn">登录</button>
                            <div data-v-3488bcba="" class="prompt-box">没有账号？
                                <span data-v-3488bcba="" class="clickable" id="zhuce"
                                    onclick="clickShow(false)">注册</span>
                                <a data-v-3488bcba="" href="/reset-password" class="right clickable">忘记密码</a>
                            </div>
                        </div>
                        <div data-v-3488bcba="" class="oauth-box">
                            <div data-v-3488bcba="" class="hint">第三方账号登录：</div>
                            <div data-v-3488bcba="" class="oauth">
                                <div data-v-3488bcba="" class="oauth-bg">
                                    <img data-v-3488bcba="" title="微博" alt="微博" src="./img/zbx/weibo.0cd39f5.png"
                                        class="oauth-btn">
                                </div>
                                <div data-v-3488bcba="" class="oauth-bg">
                                    <img data-v-3488bcba="" title="微信" alt="微信" src="./img/zbx/wechat.ce329e6.png"
                                        class="oauth-btn">
                                </div>
                                <div data-v-3488bcba="" class="oauth-bg">
                                    <img data-v-3488bcba="" title="GitHub" alt="GitHub"
                                        src="./img/zbx/github.547dd8a.svg" class="oauth-btn">
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="alert-list">
                    </div>
            

                </div>
                <!-- 广告 -->

                <div data-v-6e4d029a="" data-v-90732428="" class="recommend-box">
                    <div data-v-6e4d029a="" class="extension">
                        <div data-v-6e4d029a="" data-growing-container="true" data-growing-title="掘金插件" class="link">
                            <div data-v-6e4d029a="" class="title" 掘金浏览器插件 - 下载插件，送你 <span data-v-6e4d029a=""
                                class="price">
                                45元</span>
                                买小册</div>
                        </div>
                        <div data-v-6e4d029a="" class="ion-close">
                        </div>
                    </div>
                </div>


            </div>
            <!-- 注册 -->
            <div class="zhuce">
                <div data-v-3488bcba="" data-v-90732428="" class="auth-modal-box">
                    <form data-v-3488bcba="" class="auth-form">
                        <div data-v-3488bcba="" class="panfish" style="display: none;">
                            <img data-v-3488bcba="" src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png"
                                class="normal">
                            <img data-v-3488bcba="" src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png"
                                class="greeting" style="display: none;">
                            <img data-v-3488bcba="" src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png"
                                class="blindfold" style="display: none;">
                        </div>
                        <i data-v-3488bcba="" title="关闭" class="close-btn ion-close-round"
                            onclick=" boxShow(false,false)">
                        </i>
                        <div data-v-3488bcba="" class="panel">
                            <h1 data-v-3488bcba="" class="title">注册</h1>
                            <!---->
                            <div data-v-3488bcba="" class="input-group">
                                <div data-v-3488bcba="" class="input-box">
                                    <input data-v-3488bcba="" name="registerUsername" maxlength="20"
                                        placeholder="请输入用户名" class="input">
                                </div>
                                <div data-v-3488bcba="" class="input-box">
                                    <input data-v-3488bcba="" name="registerPhoneNumber" maxlength="64"
                                        placeholder="请输入手机号" class="input">
                                </div>
                                <!---->
                                <div data-v-3488bcba="" class="input-box" style="display: none;">
                                    <input data-v-3488bcba="" name="registerSmsCode" maxlength="6" placeholder="手机验证码"
                                        class="input">
                                    <button data-v-3488bcba="" class="send-vcode-btn">获取验证码</button>
                                </div>
                                <div data-v-3488bcba="" class="input-box">
                                    <input data-v-3488bcba="" name="registerPassword" type="password" maxlength="64"
                                        autocomplete="new-password" placeholder="请输入密码（不少于 6 位）" class="input">
                                </div>
                            </div>
                            <button data-v-3488bcba="" class="btn">注册</button>
                            <div data-v-3488bcba="" class="prompt-box ">
                                <span data-v-3488bcba="" class="clickable" onclick="clickShow(true)">已有账号登录</span>
                            </div>
                        </div>
                        <div data-v-3488bcba="" class="oauth-box">
                            <div data-v-3488bcba="" class="hint">
                                第三方账号登录：
                            </div>
                            <div data-v-3488bcba="" class="oauth">
                                <div data-v-3488bcba="" class="oauth-bg">
                                    <img data-v-3488bcba="" title="微博" alt="微博"
                                        src="https://b-gold-cdn.xitu.io/v3/static/img/weibo.fa758eb.svg"
                                        class="oauth-btn">
                                </div>
                                <div data-v-3488bcba="" class="oauth-bg">
                                    <img data-v-3488bcba="" title="微信" alt="微信"
                                        src="https://b-gold-cdn.xitu.io/v3/static/img/wechat.e0ff124.svg"
                                        class="oauth-btn">
                                </div>
                                <div data-v-3488bcba="" class="oauth-bg">
                                    <img data-v-3488bcba="" title="GitHub" alt="GitHub"
                                        src="https://b-gold-cdn.xitu.io/v3/static/img/github.547dd8a.svg"
                                        class="oauth-btn">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
        <!-- js -->
        <script>
            //  true  登陆框显示     false  注册显示
            function clickShow(flag) {
                // 两个函数控制显示
                flag ? dl() : zc();
                // 登陆显示
                function dl() {
                    document.querySelector('.zhuce').className = 'zhuce';
                    document.querySelector('.denlu').className = 'denlu show';
                };
                // 注册显示
                function zc() {
                    document.querySelector('.zhuce').className = 'zhuce show';
                    document.querySelector('.denlu').className = 'denlu';
                };
            }

            // 控制登陆显示的函数   true  显示          false   隐藏  
            function boxShow(flag, flag1) {
                flag ? document.querySelector('.longin_box').style.display = 'flex' : document.querySelector('.longin_box').style.display = 'none';
                // 调用登陆或者注册的显示
                clickShow(flag1);
            };

            // boxShow(true,true);






            /* tab切换函数（点击元素类名，切换类名，事件类型，回调函数）  包括 回调函数（被点击的元素，点击元素的索引）*/
            (function () {
                /**
               * 
               * @param {'点击的元素类名'} clickClass 
               * @param {'需要切换的类名'} toggleClass 
               * @param {'事件类型'} eventType 
               * @param {'回调函数'} fn 
               */
                function $_tab(clickClass, toggleClass, eventType, fn) {
                    // 获取的点击元素
                    const clickEle = document.querySelectorAll(clickClass);
                    // 给所有元素添加点击事件
                    for (let i = 0; i < clickEle.length; i++) {
                        clickEle[i].addEventListener(eventType, function () {
                            if (toggleClass != null) {
                                // 让有类名的移除
                                if (document.querySelector(clickClass + '.' + toggleClass)) {
                                    document.querySelector(clickClass + '.' + toggleClass).classList.remove(toggleClass);
                                }
                                // 给点击的元素加上类名
                                this.classList.add(toggleClass);
                            };
                            // 如果有回调函数就调用
                            if (fn) {
                                fn(this, i);
                            }
                        })
                    }
                }
                // 暴露
                window.$_tab = $_tab;
            }());

            $('.auth-form').on('click', '.btn', function () {
                .0
                // console.log(232);
                let datastr = $('form').serialize();
                $.ajax({
                    type: 'post',
                    url: '/reset',
                    data: datastr,
                    success: function (data) {
                        // console.log(data);
                        if (data.code == '1002') {
                            alert(data.message);
                            // return;
                        } if (data.code == '1003') {
                            alert(data.message)
                            location.href = '/'
                        }
                    }
                })

            })
            // console.log($('.input-group input').focus(function(){console.log(5)}));
            $_tab('.input-group input', null, 'focus', function (ele, index) {
                $('.panfish>img').css('display', 'none');
                document.querySelectorAll('.panfish>img')[index + 1].style.display = 'block';
            });
            $('.panel .btn').click(function () {
                $('.panfish>img').css('display', 'none');
                document.querySelectorAll('.panfish>img')[0].style.display = 'block';

                //     <div class="alert-list">

                //     <div class="alert">请填写手机号</div>

                // </div>
                let inputs = document.querySelectorAll('.input-group input');
                if (inputs[0].value == '') {
                    createAlert('请输入手机号或邮箱');
                } else if (inputs[1].value == '') {
                    createAlert('请输入密码');
                } else if (!(/^1{1}\d{10}$/.test(inputs[0].value)) && inputs[0].value.length < 11) {
                    createAlert('手机号格式错误');
                } else if (!(/^.+@{1}.+\.{1}.{2,5}/.test(inputs[0].value))) {
                    createAlert('邮箱格式错误');
                } else if (!(inputs[1].value.length >= 6)) {
                    createAlert('密码错误');
                }
                function createAlert(textContent) {
                    let oDiv = document.createElement('div');
                    oDiv.className = 'alert';
                    oDiv.innerHTML = textContent;
                    oDiv.time = setTimeout(function () {
                        document.querySelector('.alert-list').removeChild(oDiv);
                    }, 2000);
                    document.querySelector('.alert-list').appendChild(oDiv);
                }
                inputs[0].focus();
            });
            $('.input-group input').blur(function () {
                $('.panfish>img').css('display', 'none');
                document.querySelectorAll('.panfish>img')[0].style.display = 'block';
            });

























        </script>
    </div>

</body>

</html>